<template>
  <div class="iframe_box">
    <nut-drag @click.stop="onBtnClicked" style="width: 46px; height: 46px;top: 0px;"
      :style="{ top: state.boundary.top + 'px' }" v-if="state.showDrag" class="drag" attract :boundary="state.boundary">
      <iconpark-icon name="home" size="30" />
    </nut-drag>
    <iframe id="iframeId" v-if="state.src" :src="state.src" frameborder="0" scrolling="auto" allow="cookies"
      sandbox="allow-same-origin allow-scripts allow-storage-access-by-user-activation" />
  </div>

</template>
<script setup lang='ts'>
import { stopMove } from '@/assets/setEvent';
import { Local } from '@/utils/storage';
import { onMounted, onUnmounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const state: any = reactive({
  showDrag: true,
  src: '',
  left: '',
  top: 0,
  boundary: { top: 0, left: 0, bottom: 20, right: 0 },
  rlen: history.length,
})

const onBtnClicked = () => {
  let len = state.rlen - history.length - 1
  router.go(len)

}
const resizeChange = () => {
  state.showDrag = false
  setTimeout(() => {
    state.showDrag = true
  }, 200);
  // if (window.orientation === 90 || window.orientation === -90) {
  //   state.show = false

  // } else {
  //   state.show = true
  // }
}
const isStandaloneMode = () => {
  const isIOS = /iphone|ipad|ipod/i.test(window.navigator.userAgent);
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;
  if (isStandalone) {
    state.boundary.top = 30
    console.log('主屏幕模式 (PWA)');
  } else if (isIOS) {
    state.boundary.top = 0
    console.log('普通浏览器模式 (iOS)');
  } else {
    state.boundary.top = 0
    console.log('普通浏览器模式');
  }
}
const event = "onorientationchange" in window ? "orientationchange" : "resize"
onMounted(() => {
  document.removeEventListener('scroll', stopMove);
  // User(pinia).setAppHeight(100)
  document.body.style.overflow = 'auto'
  document.body.style.height = '200vh'
  isStandaloneMode()
  window.scrollTo({
    top: document.body.scrollHeight,
    behavior: 'smooth' // 平滑滚动
  });


  setTimeout(() => {
    state.src = Local.get('gameUrl')
  }, 300);

  window.addEventListener(event, resizeChange, false)

})
onUnmounted(() => {
  document.addEventListener('scroll', stopMove);
  document.body.style.overflow = 'hide'
  document.body.style.height = '100vh'
  window.removeEventListener(event, resizeChange, false)
})
</script>


<style lang="scss" scoped>
.iframe_box {
  bottom: 0;
  height: 100%;
  left: 0;
  min-height: 0 !important;
  overflow-y: scroll;
  overflow: hidden;
  padding-bottom: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 40;
}

#iframeId {
  height: 100%;
  min-height: 0 !important;
  padding-top: 0;
  position: relative;
  width: 100%;
  z-index: 0;
}

.drag {
  background-color: #ccc;
  border-radius: 50%;
  z-index: 9999 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-btn {
  // padding: 30px;
}
</style>
